<template>
  <div class="view-container">
    <el-form :model="queryParam" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="用户名称" prop="nickname">
            <el-input v-model="queryParam.nickname" placeholder="请输入用户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nebula-table :columns="columns" :data="tableData" header-row-class-name="header-row-class"
                  use-tool-bar border show-overflow-tooltip :total="rowsTotal" @change="changePage">
      <template #head-toolbar>
        <el-button type="primary" @click="handleCreate" size="small">添加</el-button>
      </template>
      <template #operation="scope">
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </nebula-table>
    <el-dialog v-model="isShow" title="添加用户">
      <div class="createForm view-container">
        <el-form :model="userParam" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="用户名称" prop="nickname">
                <el-input v-model="userParam.nickname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="queryUser">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :model="createParam" label-width="auto">
          <el-radio-group v-model="createParam.userId" style="width: 100%">
            <el-row :gutter="30" style="width: 100%;">
              <el-col :span="4" v-for="item in userData">
                <el-radio :value="item.id" :label="item.nickname" border></el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form>
        <el-pagination v-model="userParam.pageNum" :page-size="userParam.pageSize" :total="rowsTotal"
                       @change="userPage" size="small" background style="margin-top: 15px"></el-pagination>
      </div>
      <template #footer>
        <el-button @click="createCancel">取消</el-button>
        <el-button type="primary" @click="createSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {createOrDeleteRoleUser, getRoleUserTableData} from "@/api/sysRole.js";
import {useRoute} from "vue-router";
import {getUserTableData} from "@/api/sysUser.js";
import NebulaTable from "@/components/NebulaTable.vue";
import {ElMessageBox, ElNotification} from "element-plus";

defineOptions({
  name: 'roleDetail'
})
const route = useRoute()
const roleId = route.params.roleId
const queryParam = ref({
  nickname: null,
  roleId: roleId,
  pageNum: 1,
  pageSize: 10
})
const rowsTotal = ref(0)
const tableData = ref([])
const columns = ref([
  {title: "昵称", key: "nickname", align: "center"},
  {title: "性别", key: "userSex", align: "center"},
  {title: "电话", key: "userTelephone", align: "center"},
  {title: "邮箱", key: "userEmail", align: "center"},
  {title: "创建时间", key: "createTime", align: "center"},
  {title: "操作", align: 'center', customSlot: 'operation'}
])

const isShow = ref(false)

const page = reactive({
  current: queryParam.value.pageNum,
  limit: queryParam.value.pageSize,
  total: rowsTotal,
  layout: ["prev", "page", "next", "limits", "count"],
});

const createParam = ref({
  roleId: roleId,
  userId: null
})

const userData = ref([])
const userTotal = ref(0)
const userParam = ref({
  nickname: null,
  pageNum: 1,
  pageSize: 30
})

const createCancel = () => {
  isShow.value = false
  createParam.value["userId"] = null
}

const createSubmit = () => {
  createOrDeleteRoleUser(createParam.value).then(res => {
    if (res.code === 200) {
      isShow.value = false
      handleQuery()
      ElNotification({
        title: "操作成功",
        type: "success"
      })
    } else {
      ElNotification({
        title: "操作失败",
        type: "error",
        message: res.msg
      })
    }
  })
}

const changePage = (currentPage,pageSize) => {
  queryParam.value.pageNum = currentPage
  queryParam.value.pageSize = pageSize
  handleQuery()
}

const handleQuery = () => {
  getRoleUserTableData(queryParam.value).then(res => {
    tableData.value = res.data.rows
    rowsTotal.value = res.data.total
  })
}

const resetParams = () => {
  for (let key in queryParam.value) {
    switch (key) {
      case "pageNum":
      case "pageSize":
        continue;
      case "roleId":
        queryParam.value[key] = roleId;
        continue;
      default:
        queryParam.value[key] = null
    }
  }
}


const handleCreate = () => {
  queryUser()
  isShow.value = true
}

const queryUser = () => {
  getUserTableData(userParam.value).then(res => {
    userData.value = res.data.rows
    userTotal.value = res.data.total
  })
}

const userPage = (item) => {
  userParam.value.pageNum = item.current
  queryUser()
}

const handleDelete = (row) => {
  const confirmText = `确定要删除当前角色下的用户【${row.nickname}】吗?`
  ElMessageBox.confirm(
      confirmText,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    const changeParam = {
      id: row.id,
    }
    createOrDeleteRoleUser(changeParam).then(res => {
      if (res.code === 200) {
        handleQuery()
        ElNotification({
          title: "操作成功",
          type: "success"
        })
      } else {
        ElNotification({
          title: "操作失败",
          type: "error",
          message: res.msg
        })
      }
    })
  })
}


onMounted(() => {
  handleQuery()
})
</script>
